<template>
  <div class="app-container">
    <div class="goods-top">
      <panel-group></panel-group>
    </div>
    <div class="goods-echarts">
      <line-chart></line-chart>
    </div>
    <div class="goods-table">
      <div class="goods-table-item">
        <div class="title">访客排行</div>
        <div class="table">
          <el-table :data="list" stripe height="21vh">
            <el-table-column prop="id" label="排行" width="80" />
            <el-table-column prop="id" label="商品名称" width="300">
              <template slot-scope='{row}'>
                <div class="goods-info">
                  <div class="goods-img">
                    <image-preview :src="row.img" width="30" height="30"></image-preview>
                  </div>
                  <div>{{ row.title }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fk" label="访客数" />
          </el-table>
        </div>
      </div>
      <div class="goods-table-item">
        <div class="title">支付排行</div>
        <div class="table">
          <el-table :data="list" stripe height="21vh">
            <el-table-column prop="id" label="排行" width="80" />
            <el-table-column prop="id" label="商品名称" width="300">
              <template slot-scope='{row}'>
                <div class="goods-info">
                  <div class="goods-img">
                    <image-preview :src="row.img" width="20" height="20"></image-preview>
                  </div>
                  <div>{{ row.title }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fk" label="支付金额" />
          </el-table>
        </div>
      </div>
      <div class="goods-table-item">
        <div class="title">销量排行</div>
        <div class="table">
          <el-table :data="list" stripe height="21vh">
            <el-table-column prop="id" label="排行" width="80" />
            <el-table-column prop="id" label="商品名称" width="300">
              <template slot-scope='{row}'>
                <div class="goods-info">
                  <div class="goods-img">
                    <image-preview :src="row.img" width="30" height="30"></image-preview>
                  </div>
                  <div>{{ row.title }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fk" label="销量(件)" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PanelGroup from './components/PanelGroup.vue';
import LineChart from './components/LineChart.vue';
export default {
  name: "Goods",
  components: { PanelGroup, LineChart },
  data() {
    return {
      list: [{
        id: 1,
        img: 'https://img1.baidu.com/it/u=787132584,3819075437&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735318800&t=4eb724c0a5b71c684ede2d24dbdd4ec5',
        title: '抗衰护肤品VIP套盒',
        fk: 1233,
      }, {
        id: 1,
        img: 'https://img1.baidu.com/it/u=787132584,3819075437&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735318800&t=4eb724c0a5b71c684ede2d24dbdd4ec5',
        title: '抗衰护肤品VIP套盒',
        fk: 1233,
      }, {
        id: 1,
        img: 'https://img1.baidu.com/it/u=787132584,3819075437&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735318800&t=4eb724c0a5b71c684ede2d24dbdd4ec5',
        title: '抗衰护肤品VIP套盒',
        fk: 1233,
      },
      {
        id: 1,
        img: 'https://img1.baidu.com/it/u=787132584,3819075437&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1735318800&t=4eb724c0a5b71c684ede2d24dbdd4ec5',
        title: '抗衰护肤品VIP套盒',
        fk: 1233,
      },],
    };
  },
  created() {
  },
  mounted() { },
  methods: {
  },
};
</script>

<style lang="less" scoped>
.app-container {
  background-color: aliceblue;

  .goods-top {
    height: 20vh;
    width: 100%;
    padding: 0 30px;
  }

  .goods-echarts {
    height: 30vh;
  }

  .goods-table {
    height: 30vh;
    padding: 30px 30px 10px 30px;
    display: flex;
    justify-content: space-between;

    .goods-table-item {
      width: 30%;
      height: 100%;
      overflow: hidden;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;

      .title {
        margin-bottom: 20px;
        font-size: 20px;
      }

      .table {
        width: 100%;

        // ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
        //   width: 0;
        //   height: 0;
        // }
      }
    }
  }

  .goods-top,
  .goods-echarts,
  .goods-table {
    margin-top: 20px;
    border-radius: 10px;
    background: linear-gradient(137deg, #e5e5e6 0%, #ffffff 10%, rgba(255, 255, 255, 0.89) 80%, #e5e5e6 100%);
  }

  .goods-info {
    display: flex;
    align-items: center;

    .goods-img {
      margin-right: 20px;
    }
  }
}
</style>
